<script setup>
import WkFormItem from "components/NewCom/WkForm/WkFormItem.vue";

defineOptions({
  // 多块形式的form-item 用于字段库
  name: 'WkFormItems',
})

const props = defineProps({
  // 表单验证前缀
  propPrefix: {
    type: String,
    default: ''
  },
  fieldFrom: {
    type: Object,
    default: () => {
      return {}
    }
  },
  fieldList: {
    type: Array,
    default: () => {
      return []
    }
  },
  // 忽略的字段直接输出
  ignoreFields: {
    type: Array,
    default: () => {
      return []
    }
  },
  disabled: Boolean
})

const emits = defineEmits(['change'])

function fieldChange(item, index, value, valueList) {
  console.log("fieldChange items", item, index, value, valueList)
  emits('change', item, index, value, valueList)
}
</script>

<template>
  <flexbox class="wk-form-items" align="flex-start" wrap="wrap" justify="flex-start">
    <template v-for="(item, index) in fieldList" :key="index">
      <!--下面的index不能删除，不是普通的v-for使用的，而是内部使用的一个序列号-->
      <WkFormItem :prop-prefix="propPrefix" :item="item" :index="index"
                  :field-from="fieldFrom"
                  :ignore-fields="ignoreFields"
                  :disabled="item.disabled || disabled"
                  @change="fieldChange">
        <template v-slot:default="{ data, index }">
          <!--默认插槽-->
          <slot :data="data" :index="index"/>
        </template>
      </WkFormItem>
    </template>
  </flexbox>
</template>


<style lang="scss" scoped>
.wk-form-items {
  padding: 0 12px;
}
</style>
